<template>
    <div>
        <!-- <el-form-item :label="$t('name')">
            <el-input v-model="reader.name" disabled />
        </el-form-item>-->
        <el-form-item :label="$t('sliceRecordCount')">
            <el-input-number v-model="reader.parameter.sliceRecordCount" :min="1" />
        </el-form-item>
        <el-form-item :label="$t('column')" :prop="$t('column')">
            <el-input
                ref="inputItem"
                type="textarea"
                :autosize="{ minRows: 2 }"
                v-model="reader.parameter.column"
            />
        </el-form-item>
    </div>
</template>

<script setup>
import { ref, watch  } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const reader = ref({
    "name": "streamreader",
    "parameter": {
        "sliceRecordCount": 10,
        "column": []
    }
})

store.commit('setReader', reader.value)

watch(
    reader,
    (state, prevState) => {
        store.commit('setReader', state)
    },
    { deep: true }
)
</script>